<script setup lang="ts">
import {DictType} from "@/utils/enum-type";
import {useDateFormat} from '@vueuse/core'
import {useGetOptions} from "@/utils/use/use-get-options";
import {initPageQuery} from "@/utils/common-fn";
import {FormInstance} from "element-plus";
import {RecordVo} from "@/api/sys/dnf/record/types";
import {getRecordVoListApi} from "@/api/sys/dnf/record";


/**
 * table
 */
    // table数据
let tableData: Ref<RecordVo[]> = ref([])
// 获取options
let allOptions = useGetOptions(DictType.DnfRecordType, DictType.Success);
const recordOptions = computed(() => allOptions.value[0])
const successOptions = computed(() => allOptions.value[1])
/**
 * 搜索和分页
 */
// 总数
const total = ref(0)
// 搜索ref
const searchRef = ref<FormInstance>()
// 分页信息,以及查询条件,用于发送api
const queryData = reactive(initPageQuery<RecordVo>({relations:{user:true},order:{createDate:'desc'}}))

// 获取列表
async function getList() {
  [tableData.value, total.value] = await getRecordVoListApi(queryData)
  allOptions = useGetOptions(DictType.DnfRecordType, DictType.Success);
}

// 重置搜索
async function resetSearch(formEl: FormInstance | undefined) {
  if (!formEl) {
    return;
  }
  formEl.resetFields()
  queryData.query = {}
  await nextTick()
  await getList()
}

// 表格排序
async function sortTable({prop, order}: {
  prop: string,
  order: 'descending' | 'ascending' | null
}) {
  if (order === 'descending' || !order) {
    queryData.order = {[prop]: 'desc'}
  } else {
    queryData.order = {[prop]: 'asc'}
  }
  await getList()
}

watch([() => queryData.pageSize, () => queryData.currentPage], async () => {
  await getList()
})
// 载入查询
onMounted(async () => {
  await getList()
})
</script>

<template>
  <!--  查询 -->
  <x-card>
    <el-form :inline="true" :model="queryData.query" label-suffix=":" ref="searchRef" class="flex flex-items-center">
      <el-form-item label="成功" prop="success">
        <x-dict-select v-model="queryData.query.success" :type-code="DictType.Success" type="select"/>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <x-dict-select v-model="queryData.query.type" :type-code="DictType.DnfRecordType" type="select"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch(searchRef)" circle>
          <i-ep-refresh-left/>
        </el-button>
      </el-form-item>
    </el-form>
  </x-card>
  <!--  表格-->
  <x-card>
    <el-table :data="tableData" style="width: 100%" show-overflow-tooltip @sort-change="sortTable" stripe>
      <el-table-column label="用户昵称" min-width="140" sortable="custom">
        <template #default="{row}">
          <el-text>{{ row.user.nickname }}</el-text>
        </template>
      </el-table-column>
      <el-table-column prop="success" label="是否成功" min-width="100" sortable="custom">
        <template #default="{row}">
          <x-tag :value="row.success" :options="successOptions"/>
        </template>
      </el-table-column>
      <el-table-column prop="errorMessage" label="错误信息" min-width="400" :show-overflow-tooltip="false">
        <template #default="{row}">
          <el-input type="textarea" autosize readonly :model-value="row.errorMessage"/>
        </template>
      </el-table-column>
      <el-table-column prop="type" sortable="custom" label="类型" width="100">
        <template #default="{row}">
          <x-tag :value="row.type" :options="recordOptions"/>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" min-width="140" sortable="custom">
        <template #default="{row}">
          <el-text>{{ useDateFormat(row.createDate, 'YYYY-MM-DD HH:mm:ss') }}</el-text>
        </template>
      </el-table-column>
    </el-table>
  </x-card>
  <!--  分页-->
  <x-card>
    <XPagination
        v-model:page-size="queryData.pageSize"
        v-model:current-page="queryData.currentPage"
        v-model:total="total"
    />
  </x-card>
</template>

<style scoped lang="scss">

</style>